<template>
	<!-- 搜索界面 -->
	<view class="content">
		<!-- 搜索导航 -->
		<view class="search">
			<view class="search_nav">
				<icon @click="searchval" style="margin: 0 10rpx;" type="search" size="24rpx"></icon>
				<input class="search_nav_input" :value="val" @input="search" focus placeholder="请输入商品名称" />
			</view>
			<text class="search_nav_next" @click="quxiao">取消</text>
		</view>
		<!-- 搜索列表 -->
		<view class="search_li" v-if="0">
			<text class="search_li_t">djslfk</text>
			<text class="search_li_t">djslfk</text>
			<text class="search_li_t">djslfk</text>
			<text class="search_li_t">djslfk</text>
			<text class="search_li_t">djslfk</text>
		</view>
		<!-- 最近搜索 -->
		<view v-if="ishistory" :hidden="val!=''" class="host">
			<view class="hostbiaoti">
				<text class="hosttitle">最近搜索</text>
				<view class="hostimg" @click="removehostimg">
					<image mode="widthFix" src="http://localhost:3000/img/delete.png"></image>
				</view>
			</view>
			<view class="hostul">
				<text @click="gethostlist(item)" class="hostli" v-for="item of history" :key="item">{{item}}</text>
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="search_lists" :class="{top_top:val!='',top_top2:val==''}">
			<!-- 导航部分 -->
			<view class="dropdownmenu" v-if='0'>
				<van-dropdown-menu z-index="1" close-on-click-outside close-on-click-overlay active-color="#cb2d01">
				  <van-dropdown-item @change="valuesdropdown1" :value="value1" :options="option1" />
				  <van-dropdown-item @change="valuesdropdown" title="销量"/>
				  <van-dropdown-item @change="valuesdropdown" :value="value2" :options="option2" />
				</van-dropdown-menu>
			</view>
			<view class="search_lists_list">
				<view v-for="(item,index) of shooplist" 
					:key="index" @click="particulars(item.goods_id)">
					<van-card
					  custom-class="custom-class"
					  thumb-mode="widthFix"
					  num-class="num-class"
					  :price="item.goods_price"
					  desc="原产自蒙古大草原,新鲜实惠"
					  :title="item.goods_name"
					  :thumb="shoopimg[index].pics_big"
					/>
				</view>
			</view>
		</view>
		<!-- 暂无商品 -->
		<view class="shopstop" v-if="shopstop">
			请输入商品名称
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// val值
				val:'',
				// 历史搜索记录
				history:[],
				// 历史记录显示隐藏
				ishistory:false,
				// 商品的下拉菜单
				 option1: [
				      { text: '综合', value: 0 },
				      { text: '信用', value: 1 },
				      { text: '价格降序', value: 2 },
					  { text: '价格升序', value: 3 }
				    ],
				option2: [
				  { text: '筛选', value: 'a' }
				],
				value1: 0,
				value2: 'a',
				// 商品列表
				shooplist:[],
				// 商品列表名字
				shooplistname:[],
				// 图片地址
				shoopimg:[],
				// 暂无商品
				shopstop:false,
			}
		},
		onLoad(query) {
			
			this.val=query.query
			// console.log(this.val)
			this.gethistory()
			this.getshooplist(query.query)
		},
		methods:{
			// 获取商品列表
			getshooplist(query){
				uni.request({
					url:"http://localhost:3001/goods_title",
					data:{
						query:query
					},
					method:"GET",
					success: (res) => {
						if(res.data.data.length==0){
							this.shopstop=true
						}else{
							this.shopstop=false
						}
						this.shooplist=res.data.data
						this.getshoopimg(res.data.data)
						// console.log(this.shooplist)
					}
				})
			},
			// 获取商品列表的图片地址
			getshoopimg(shooplist){
				if(shooplist.length){
					var imgobj=[]
					shooplist.forEach(item=>{
						uni.request({
							url:"http://localhost:3001/goods_img",
							data:{id:item.goods_id},
							method:"GET",
							success: (res) => {
								imgobj.push(res.data.data[0])
							}
						})
					})
					this.shoopimg=imgobj
					// console.log(this.shoopimg)
				}
			},
			// 获取商品列表的名字
			getshooplistname(query){
				uni.request({
					url:"http://localhost:3001/goods_name",
					data:{
						query:query
					},
					method:"GET",
					success: (res) => {
						this.shooplistname=res.data.data
						// console.log(this.shooplistname)
						
					}
				})
			},
			// 获取本地缓存中的历史搜索记录,渲染到页面
			gethistory(){
				uni.getStorage({
					key:"history",
					// 成功时调用
					success:res=>{
						this.history=JSON.parse(res.data)
						this.ishistory=true;
						// console.log(this.history)
					},
					// 失败时调用
					fail:()=> {
						this.ishistory=false
					}
				})
			},
			// 调用搜索接口成后，把搜索的内容添加到本地存储
			sethistory(data){
				this.history.unshift(data)
				uni.setStorage({
					key:"history",
					data:JSON.stringify(this.history),
					success: () => {
						this.ishistory=true
					}
				})
			},
			// 获取搜索框的内容,实时搜索
			search(val){
				this.val=val.detail.value
				// this.getshooplistname(this.val)
				// console.log(val)
			},
			// 点击搜索按钮,进行搜索
			// 点击商品类表,进入商品详情页
			particulars(item){
				// console.log("aaa")
				uni.navigateTo({
					url:"../particulars/particulars?item="+item
				})
			},
			searchval(){
				this.getshooplist(this.val)
				this.sethistory(this.val)
			},
			// 点击历史记录列表,搜索
			gethostlist(item){
				// console.log(item)
				this.val=item
				this.getshooplist(item)
				
			},
			// 点击取消按钮,返回上一级
			quxiao(){
				uni.navigateBack()
			},
			// 点击删除按钮,清空历史记录
			removehostimg(){
				console.log('a')
				uni.removeStorage({
					key:"history",
					success: () => {
						this.ishistory=false
						this.history=[]
						this.val=""
						
					}
				})
			},
			// 下拉菜单改变时触发
			valuesdropdown1(val){
				this.value1=val.detail
				console.log(val)
			},
		}
	}
</script>

<style>
	page{
		height: 100%;
		width: 750rpx;
		background-color: #F3F3F3;
		
	}
	.content{
		height: 100%;
	}
	.top_top{
		margin-top: 130rpx;
	}
	.top_top2{
		margin-top: 130rpx;
	}
	image{
		width: 100%;
		display: block;
	}
	
	.search{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		background-color: #FFFFFF;
		padding: 20rpx;
		z-index: 999;
	}
	.search_nav{
		flex:1;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
		background-color: #f1f1f1;
		padding: 12rpx 14rpx;
		margin-right: 10rpx;
	}
	.search_nav_input{
		flex:1;
		font-size: 18rpx;
	}
	.search_nav_next{
		font-size: 16rpx;
	}
	.search_li{
		margin-top: 100rpx;
		background-color: #fff;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.search_li_t{
		padding: 10rpx;
		border-bottom: 2rpx solid #eee;
	}
	
	.host{
		margin: 22rpx;
		margin-top: 122rpx;
		padding: 0 4rpx;
	}
	.hostbiaoti{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.hosttitle{
		font-size: 20rpx;
		font-weight: 400;
	}
	.hostimg{
		width: 28rpx;
	}
	.hostul{
		display: flex;
		padding: 6rpx;
		flex-wrap: wrap;
	}
	.hostli{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 30rpx;
		background-color: #FFFFFF;
		font-size: 20rpx;
		margin: 14rpx 6rpx;
		border-radius: 30rpx;
	}
	
	.dropdownmenu{
		margin-top: 122rpx;
	}
	.search_lists{
		/* height: 100%; */
	}
	.search_lists_list{
		/* height: 100%; */
		margin: 20rpx;
	}
	.custom-class{
		background-color: #FFFFFF!important;
		margin-bottom: 20rpx;
	}
	.num-class{
		display: none;
	}
	
	.shopstop{
		font-size: 34rpx;
		color: #999999;
		text-align: center;
		margin-top: 160rpx;
	}
</style>
